<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 属性选择器：
        [属性名] 选中指定属性的元素
        [属性名+属性值] 选中指定属性名和属性值的元素
        [属性名^=属性值] 选中以属性值开头的元素
        [属性名$=属性值] 选中以属性值结尾的元素
        [属性名*=属性值] 选中含有属性名中所有属性值得元素 */



        /* 伪类选择器：
        :first-child 选中第一个子元素
        :last-child 选中最后一个子元素
        :nth-child() 选中任意的子元素，odd表示选中奇数行，even表示选中偶数行
            特殊值：n
            如果写2n则选中偶数，如果写2n+1则为奇数，3n则为3的倍数，同数学
            -以上元素都是找的是所有元素中的子元素

            :first-of-child
            :last-of-child
            :nth-child()
            -找的是同一类型的子元素

            -:not() 除了…… */



        /* 超链接的伪类：
        a:link{
            表示没有访问过的链接
        }
        a:visited{
            表示访问过的链接
        }
        a:hover{
            用来设置鼠标移入的状态（不只有超链接可以使用）
        }  

        a:active{
            用来设置鼠标点击时的状态
        }
        :focus{
            获取焦点的位置时候的状态
        }
        去除超链接默认样式text-decoration:none;
        */

        /*
        伪元素选择器：
        伪元素：表示页面中的一些特殊的并不真实存在的元素
            微元素使用 :: 开头
            p::first-letter{
                font-size:50px;
                选中第一个字母
            }

            p::first-line-line{
                选择第一行元素
            }

            p::selection{
                表示鼠标选中的区域，可以设置属性
            }

            p::before{
                content:"abc";
                选中p前面的空位（必须结合content使用）
            }
            p::after{
                选中p后面的空位
                content:"abc";
            }
    */

        /*
        样式的继承性：
        我们为一个元素设置的样式会被应用到他的后代元素上

        继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式，设置为后代元素

        注意：并不是所有元素都会被继承：
        比如：背景相关的，布局相关的……

    */

        /*
        选择器的权重：
        内联样式        1000
        id选择器        0100
        类和伪类选择器   0010
        元素选择器       0001
        通配选择器       0000
        继承的样式       没有优先级

        !important 可以使元素获得最高权重

        若有多个选择器，则将选择器的权值相加，分组选择器时单独计算的，
            选择器的累加不会超过其含有的最大选择器
            如果优先级计算后相等，则优先选择下面的，上面的被覆盖


    */

        /*
            1em=1font-size=16px
            rem是相对于根元素(html)的字体大小来计算
    */

        /*
            颜色单位：
            1.可以直接使用颜色的英文名称来表示
            2.RGB值：范围在0~255或者0%~100%  语法：RGB(红色，绿色，蓝色)
            3.RGBA值： 需要四个值，前三个和RGB相同，第四个用0~1之间的一个数值来表示透明度
            4.十六进制的RGB值：#ffaabb可简写为#fab
            5.hsl值：
            H:色相：（0~360）
            s:饱和度：颜色的浓度 0%~100
            l:亮度（0%~100%）
            

    */

        /*
    文档流(normal flow)
        -是一个立体结构
        -通过css可以分别为每一层来设置样式
        -用户只能看到最上层的样式
            我们所创建的元素默认都是在文档流中进行排列
        -一个元素有两个状态
            在文档流
            不在文档流

            -块元素
                块元素在页面中独占一行
                默认高度被子元素撑开
                默认高度为内容（子元素）
            -行内元素
                只占自身大小
                行内元素再页面中由左向右排列，如果一行容不下，则元素回自动换行继续自左向右排列
                宽度和高度默认都是被内容撑开

        
    */

        /*
        -盒子模型(可见是由内容区，内边距，边框决定的)：
            内容区：content
            内边距：padding
                -padding-(top bottom left right)::before
                -内边距设置会影响盒子的大小

            边框：border
            边框：必须设置三个样式：
                宽度：border-width：0 0 0 0 上 右 下 左 0 0 0 上 左右 下 0 0 上下 左右 0 上下左右（默认值为3个像素）
                border-top(right bottom left)-width:指定一个边框的宽度

                颜色:border-color


                样式：border-style
                solid 实线
                dotted 点状虚线
                dashed 虚线
                double 双线
                默认值为 none
            简写属性：border:width color style(无顺序要求)
            border-(left top bottom padding):(可以设置一个边框的样式)


            外边距：margin
                外边距不会影响可见框的大小
                但是回影响盒子的位置
                一共有四个方向的外边距
                    margin-top：设置一个正直，元素会向下移动（指定负值回向相反的方向移动
                    margin-left：设置一个正值，元素会向右移动
                    默认下使用margin-right不会产生任何影响（浏览器会确保等式满足会自动设置此值）
                    元素在页面中是按照自左向右的顺序排列的
                        所以默认情况下如果我们设置的左和上外边距，元素会移动自身
                        而设置下和右边距会移动其他元素

            内容区：所有的子元素和文本内容都在内容区中排列 大小：height，weight

    */

        /*
            盒子模型：垂直布局
            当子元素超过父元素时，使用overflow清除：
            overflow:visible;
            overflow:auto 根据需要设置滚动条
            overflow-y; overflow-x; 设置滚动条的方向
            over:hidden;将超出父元素的部分裁剪，不适合于文字
            over:scrol; 生成两个滚动条，水平和垂直方向


            外边距的折叠：相邻垂直方向的折叠

            兄弟元素
                如果两个都有外边距，则两者之间取较大值
                如果相邻元素外边距一正一负，则取和
                如果都是负值，则取两者中绝对值较大的
            
            父子元素
                子元素的外边距会传递给父元素
                这种性质回影响页面布局
                解决方法：
                1 一般用父元素的内边距改变这种情况
                2 可以设置边框来区分外边距折叠现象（改变颜色和父元素相同）
    */

        /*
            行内元素的盒子模型
                行内元素不支持设置宽高  但padding margin border 可以设置（垂直方向不回影响布局）
                display可以改变元素的类型
                    inline 行内
                    block 块
                    inline-block 既可以设置宽高，也不会独占一行
                    table 设置为表格
                    none 将元素隐藏
                visibility设置元素的显示状态
                    visible 默认显示
                    hidden 不显示，但还占据着原来的位置
    */

        /*
            浏览器默认样式
                通常在编写网页时，会去掉默认样式
                1 设置margin：0 可去掉默认外边距
                2 list-style：none 可去掉项目符号
                3 *{
                    margin:0;
                    padding:0;
                    list-style:none;
                }
                4 使文字在一个父元素内垂直居中只需要将line-height设置与父元素的行高相等

    */

        /*
            盒子的大小

             属性：box-sizing
             样式：content-box（默认样式）内容区的大小 boder-box 默认修改整个可见框的大小
                */


        /*
            圆角和阴影
                outline和Boder 前者不会影响布局，后者反正
                box-shadow 设置阴影，阴影在父元素下面（不会影响页面布局）
                box-shadow 0px（设置水平偏移量） 0px（设置垂直偏移量）0px（模糊半径） #bfa（设置颜色） 
            
            Boder-radius设置圆角
            boder-top-left-radius：0px水平方向半径 0px垂直方向半径（可以设置四个角的圆角）
            boder-radius:0(左上) 0(右上) 0(右下) 0(左下) 
            boder-radius:0(设置水平方向半径）/0(设置垂直方向半径)
            boder-radius:50% 不论盒子多大，都会设置为圆形
    */

        /*
            高度塌陷问题
                -在浮动布局中，，父元素的高度默认是被子元素撑开的，
                    当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
                    将会无法撑起父元素的高度，导致父元素高度丢失

                -父元素高度丢失后，其下面的元素会自动上移，导致页面的布局混乱

                所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理

            解决方法：
            bfc(block formatting context)块级格式化环境
                -bfc是一个css中的隐含属性，可以为一个元素开启bfc
                    开启bfc该元素会变成一个独立的布局区域
                
                -开启后的特点：
                1.开启bfc后的元素不会被浮动元素所覆盖
                2.开启bfc的元素子元素和父元素外边距不会重叠
                3.开启bfc的元素可以包含浮动的子元素

                -可以通过几种方式开启bfc
                    1.设置元素的浮动（不推荐）
                    2.将元素设置为行内块元素 display：inline-block;（不推荐）
                    3.将元素的overflow设置为一个非visible的值  通常设置overflow：hidden开启bfc（副作用比较小）
                

            完美解决高度塌陷问题：
            若将box2 设置为浮动，则会出现高度塌陷问题
                    解决方法：
                        1.在box2后再添加一个box3 并将内容设置为空，利用clear：both清除两侧浮动元素的影响，即可解决高度塌陷问题
                        2.利用伪类：
                            为box1设置样式（转换为css样式问题）
                            box1::after{
                                content:"";
                                display:block;
                                clear:both;
                            }
                            完美解决！！！！
                    
                    解决外边距重叠问题：
                            box1::before{
                                content:'';
                                display:table;
                            }

        同时解决高徒塌陷和外边距重叠问题：
                    
                    .clearfix::before,
                    .clearfix::after{
                        content:'';
                        display:table;
                        clear:both;
                    }

            <div class="box1">
                <div class="box2"></div>
                <div class="box3"></div>
            </div>

    */

    /*
            clear:
                由于box1的浮动，导致box3位置上移
                    也就是box3收到了box1浮动的影响，位置发生了改变

            clear：
                -作用：清除浮动元素对当前元素的影响
                -可选值：
                    -left 清除左侧元素对当前元素的影响
                    -right 清除右侧浮动元素对当前元素的影响
                    -both 清除两侧浮动元素影响最大的那侧

                    原理：
                        设置clear后，浏览器会自动为元素添加一个外边距，使其位置不受影响


    */
            

    /*
            定位(position)：
                -定位是一种更加高级的布局手段
                -通过定位可以将元素拜访到页面的任意位置
                -使用position属性来设置定位

                    可选值：
                    static 默认值，元素是精致的没有开启定位
                    relative 开启元素的相对定位
                    alsolute 开启元素的绝对定位
                    fixed 开启元素的固定定位
                    sticky 开启元素的粘滞定位

                -相对定位：
                    特点：
                        1.如果不设置偏移量不会产生任何变化
                        2.相对定位是参照与元素在文档流中的位置进行定位的
                        3.相对定位会提升元素的层级
                        4.相对定位不会是元素脱离文档流
                        5.相对定位不会改变元素的性质 快还是块，行内还是行内


                    -偏移量（offset）
                        -可以通过设置偏移量来定位元素的位置
                            top
                                -定位元素与定位位置上边的距离
                            bottom
                                --定位元素与定位位置下边的距离
                            left
                            right
                            偏移量可以为负值


                -绝对定位：
                    特点：
                    1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
                    2.开启绝对定位后，元素会从文档流中脱离
                    3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
                    4.绝对定位元素是相对于其包含块进行定位的
                    5.绝对定位会使元素提升一个层级

                    包含块：
                        -正常情况下，包含块就是离当前元素最近的祖先块元素，

                        -绝对定位的包含块：
                            包含块就是离他最近的开启了定位的祖先元素，
                                如果所有的祖先元素都没有开启定位，则根元素就是他的包含块
                                -html （根元素，初始包含块）


                -固定定位：
                    -将元素的position设置为fixed则开启了元素的固定定位
                    -固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
                        唯一不同的是固定定位永远参照于浏览器窗口进行定位
                        固定定位的元素不会随网页的滚动条滚动

                -粘滞定位：
                    -当元素的position属性设置为sticky时则开启了元素的粘滞定位
                    -粘滞定位和相对定位的特点基本一致，
                        不同的是粘滞定位可以在元素到达某个位置是将其固定



                水平布局：
                    left+margin-left+border-left+padding-left+width+border+padding-right+border-right+margin-right+right=包含块的内容区的宽度

                    -当我们开启了绝对定位后：
                        水平方向的并不具登时就需要添加left和right两个值
                            此事规则和之前的一样 只是多加了两个值；
                                当发生过渡约束：
                                    如果九个值中没有auto，则自动调整right值以使等是满足
                                    如果有auto，则自动调整auto的值以使等式满足

                            -可设置auto的值
                                margin width left right

                            -因为left和right的值默认是auto，所以如果不知道是left和right
                                则等式不满足时，会自动调整这两个值

                        垂直方向布局的等式的也必须要满足 九个值相加=包含块内容区的高度


    */        



    /*
            
            元素的层级：

                对于开启了定位的元素，可以通过z-index属性来指定元素的层级
                    z-index需要一个整数作为参数，值越大元素的层级越高
                        元素的层级越高越优先显示

                    如果元素的层级一样，则优先显示靠下的元素

                    祖先元素的层级再高也不会盖住后代元素   z-index：9999；
    
    
    
    
    */


    /*
    
            字体族：

                字体相关的样式：
                    color 用来设置字体颜色
                    font-size 字体大小
                        和font-size相关的单位
                        em 相当于当前元素的一个font-size
                        rem相对于根元素的一个font-size
    
                    font-family 字体族（字体的格式）
                        可选值：
                            serif 衬线字体
                            sans-serif 非衬线字体
                            monospace 等宽字体
                                -指定字体的类别，浏览器会自动使用该类别下的字体

                            -font-family 可以同时制定多个字体，多个字体间使用，隔开
                                字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推 
    
    
    */

    /*
            图标字体（iconfont）：
                -在网页中经常需要使用一些图标，可以通过图片来引入图标
                    但是图片大小本身比较大，并且非常的不灵活
                -所以在使用图标时，我们还可以将图标直接设置为自提，
                    然后通过font-face的形式来对字体进行引入
                -这样我们就可以通过使用字体的形式来使用图标

            font awesome 使用步骤：

                1.下载 https://fontawwesome.com/
                2.解压
                3.将css和webfont移动到项目中
                3.使用图标文字
                    -直接通过类名来使用图标文字
                        class="fas fa-bell"
                        class="fab fa-accessible-icon"

    
            通过伪元素来设置图标字体

                1.找到眼设置图标的元素通过before或after选中
                2.在content中设置字体的编码
                3.设置字体的样式
                    fab
                    font-family:

                    fas 
                    font-family: ;
                    font-weight: ;                    


    
    
    */



    /*
    
            行高(line-height)：
                -行高指的是文字占有的实际高度
                -可以通过line-height来设置行高
                    行高可以直接指定一个大小(px em)
                    也可以直接为行高设置一个整数
                        如果是一个整数的话，行高将会是字体的指定的倍数

            字体框：
                -字体框就是字体存在的各自，设置font-size实际上就是设置字体框的高度

                行高会在字体框的上下平均分配


            字体的简写属性：

                font 可以设置字体相关的所有属性
                    语法：
                        font：字体大小/行高 字体族
                        行高 可以省略不写 如果不写使用默认值

                font-weight 字重 字体的加粗
                    可选值：
                        normal 默认值 不加粗
                        bold 加粗
                        100-900 九个级别（没用）

                font-style 字体的风格
                        normal 正常的
                        Italic 斜体

        
            文本的对齐方式：

                text-align文本的水平对齐
                    可选值：
                        left 左侧对齐
                        right 右对齐
                        center 居中对齐
                        justify 两端对齐

                vertical-align 设置元素垂直对其的方式
                    可选值：
                        baseline 默认值 基线对其
                        top 顶部对齐
                        bottom 底部对齐
                        middle 居中对齐



            文本的其他样式：
                text-decoration 设置文本修饰
                    可选值：
                        none 什么都没有
                        underline 下划线
                        line-through 删除线
                        overline 上划线

                white-space 设置网页如何处理空白
                    可选值：
                        normal 正常
                        nowrap 不换行
                        pre 保留空白

    */


    /*
            背景：

                background-color 设置背景颜色

                background-image 设置背景图片
                    格式：background-image：url(图片位置)；
                    -可以同时设置图片背景和背景颜色，这样背景颜色将会成为图片的背景色
                    -如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
                    -如果背景图片大于元素，背景图片不会完全显示
                    -如果背景图片和元素一样大，则会直接正常显示

                background-repeat 用来设置背景的重复方式
                    可选值：
                        repeat 默认值，背景会沿着x轴，y轴两个方向重复
                        repeat-x 沿着x轴方向重复
                        repeat-y 沿着y轴方向重复
                        no-repeat 背景图片不重复

                background-position 用来设置图片的位置
                    设置方式：
                        -通过 top left right center bottom 几个表示方位的词来确定
                        使用方位词时必须要同时指定两个值，如果只写一个，则第二个默认为center

                        -通过设置偏移量来指定背景图片的位置
                            水平方向的偏移量，垂直方向的偏移量


                background-clip 设置背景的范围
                    可选值：
                        border-box 默认值，背景会出现在边框的下边
                        padding-box 背景不会出现在边框，只出现在内容区和内边距
                        content-box 背景只会出现在内容区

                background-origin 背景图片的偏移量计算的远点
                        padding-box 默认值，background-position从内边距开始计算
                        content-box 背景图片的偏移量从内容区计算
                        border-box 背景图片的变量从边框开始计算

                background-size 设置背景图片的大小
                    第一个值表示宽度
                    第二个值表示高度
                    -如果只写一个，则第二个值默认是 auto

                    cover 表示图片的比例不变，将元素铺满
                    contain 图片比例不变，将图片在元素中完整显示

                background-attachment
                    -背景图片是否跟随元素移动
                    -可选值：
                        scroll 默认值 背景图片会跟随元素移动
                        fixed 背景会固定再页面中，不会随元素移动


                background-color
                background-image
                background-repeat
                header1sition
                background-size
                background-origin
                background-clip
                background-attachment
                
                -background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
                            并且爱样式没有顺序要求，也没有那个属性时必须写的

                            注意：
                                background-size必须写在background-position的后面，并且使用/隔开
                                    background-position/background-size

                                background-origin background-clip 两个样式，origin要在clip前面

    
    
    
    
    */


    /*
            渐变：
                可以通过渐变来设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过度的效果
                    渐变是图片，需要通过background-image来设置

            线性渐变：
                颜色沿着一条直线发生变化
                    linear-gradient()

                    linear-gradient(red, yellow) 红色在开头，换色在结尾，中间是过渡区域
                    -线性渐变的开头，我们可以指定一个渐变的方向
                    to left
                    to right 
                    to bottom
                    to top
                    deg 表示度数
                    turn 表示圆

                -渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，
                    也可以手动指定渐变的分布情况

                repeating-linear-gradient() 可以平铺的线性渐变
                
    
            镜像渐变：
                radial-gradient() 径向渐变（放射性的效果）
                    默认情况下径向渐变的形状根据元素的形状来计算
                        正方形-->圆形
                        长方形-->椭圆
                        -我们也可以手动指定径向渐变的大小
                        circle 圆形
                        ellipse 椭圆形

                        -也可以指定渐变的位置
                        -语法：
                            radial-gradient（大小 at 位置，颜色 位置，颜色 位置）
                                大小：
                                    circle 圆形
                                    ellipse 椭圆
                                    closest-side 近边
                                    closest-corner 近角
                                    fartheest-side 远边
                                    farthest-corner 远角

                                位置：
                                top right left center bottom


    */



    /*
            表格的简介
                在现实社会中，我们经常需要使用表格来表示一些格式化数据，
                    课程表，人名单，成绩单……

                同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格


                在table中使用tr表示表格中的一行，有几个tr就有几行
                    在tr中使用td表示一个单元格，有几个td就有几个单元格

                使用rowspan纵向合并单元格  rowspan="2"(合并两个单元格)
                使用colspan横向合并单元格， colspan="2"(横向合并两个单元格)


            可以将表格分为三个部分
                头部 thead
                主体 tbody
                底部 tfoot


            border-spacing：指定边框之间的距离
            border-collapse：设置边框的合并

            如果表格中没有使用tbody而是直接使用tr
                那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
                tr不是table的子元素

            默认情况下，元素在td中是垂直居中的 可以通过 vertical-align来修改
                vertical-align：bottom;
                text-align:center;

            display:table-cell;可以将元素设置为单元格
    
    */


    /*
            表单；
                -在现实生活中，表单用于提交数据
                -在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
                -使用form标签来创建一个表单

                form一个必要的属性：
                action 表单要提交的服务器的地址

                文本框 <input type="text" name="username">  (数据要提交到服务器中，必须要制定一个name属性)
                密码框 <input type="password" name="password">
                单选按钮 <input type="radio" name="hello" value="a" checked表示默认选中>(像这种选择框，必须要制定一个value属性，value属性最终会作为用的填写的值传递给服务器)
                多选框 <input type="checkbox" name="hello" value="1" checked表示默认选中>
                下拉列表 ：
                <select name="hahaah">
                    <option value="i"> 选项一 </option>
                    <option value="ii"> 选项二 </option>
                    <option value="iii"> 选项三 </option>
                </select>
                提交按钮：
                <input type="submit" value="注册">
                重置按钮 ：<input type="reset">
                普通的按钮：<input type="button" value="按钮">
                <button type="submit">提交</button>
                <button type="reset">重置</button>
                <button type="button">按钮</button>

                通用样式：
                autocomplete="off" 关闭自动补全
                readonly 将表单项设置为只读，数据会提交
                disabled 将表单项设置为禁用，数据不会提交
                autofocus 设置表单项自动获取焦点

    
    */

    /*
    
            设置网站的图标（在标题栏和收藏栏）
                -网站图片一般都存储在网站的根目录下，名字叫做 favicon.ico
    
    
    
    */

    /*
            过渡(transition)
                -通过过渡可以指定一个属性发生变化时的切换方式
                -通过过渡可以创建一些非常好的效果，提升用户的体验

                transition-property：指定要执行过渡的属性
                    多个属性间使用，隔开
                    如果所有属性都需要过渡，则使用all关键字
                    大部分都支持过渡效果，注意过渡时必须是从一个有效数值向另一个有小数值进行过渡
                    transition-property：height，width；

                transition-duration：指定过渡效果的持续时间
                时间单位：s 和 ms 1s=100ms

                transition-timing-function：过渡的时序函数
                指定过渡的执行方式
                可选值：
                    ease 默认值 ，慢速开始，先加速，在减速
                    linear 匀速运动
                    ease-in 加速运动
                    ease-out 减速运动
                    ease-in-out 先加速，后减速
                    cubic-bezier() 来指定 时序函数
                        https://cubic-bezier.com
                    steps()分部之星过渡效果
                        可以设置一个第二个值
                            end 在时间结束时执行过渡（默认值）
                            start 在时间开始时执行过渡
                        
                        raansition-timing-function:cubic-bezier(.24,.95,.82,-0.88);
                        transition-timing-function:steps(2,start/end); 表示在时间开始/结束时执行过渡；


                trainsition-delay：过渡的延迟时间，等待一段时间后执行过渡

            transition：可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续的时间，第二个是延迟多久才开始执行


    */

    /*
            动画：
                动画和过度类似，都是可以实现一些动态效果，
                    不同的是过渡需要在某个属性发生变化时才会触发
                    动画可以自动触发动态效果

                设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行的每一个步骤
                @keyframes （类名）{
                    from表示动画的开始位置 也可以用0%
                    from{

                    }
                    to表示动画的结束为止，也可以使用100%
                    to{

                    }

                }
                animation-name 表示要对当前元素生效的关键帧的名字
                animation-name:test；

                动画执行的时间
                animation-duration:2s; 

                设置动画的延迟
                animation-delay：2s；

                设置动画执行的方式：
                animation-timing-function：ease-in-out;

                设置动画执行的次数；
                animation-iteration-count：20；
                    可选值：
                        次数
                        infinite 无限执行

                指定动画运行的方向：
                animation-direction
                    可选值
                        normal 默认值 从from想向to运行 每次都是这样
                        reverse（反向） 从to向from运行 每次都是这样 
                        alternate 从from向to运行 重复执行动画时反向执行
                        alternate-reverse 从to向from运行 重复执行动画时反向执行

                设置动画执行的状态
                animaton-play-state
                    可选值：
                        running 默认值 东华之星
                        paused 动画暂停

                设置动画的填充模式
                animation-fill-mode
                    可选值：
                        none 默认值 动画执行完毕元素回到原来的位置
                        forwards 动画执行完毕元素会停止在动画结束的位置
                        backwards 动画延迟等待时，元素就会处于开始位置
                        both 结合了forwards 和backwards

                制作动态图素材网站 sprite animation

    
    */


    /*
            变形平移
                
                变形就是通过css来改变元素的形状或位置
                    -变形不会影响到页面的布局
                    -transfrom用来设置元素的变形效果
                        -平移：
                            trasnslateX() 沿着X轴方向平移
                            trasnslateY() 沿着Y轴方向平移
                            trasnslateZ() 沿着Z轴方向平移
                                -平移元素，百分比是相对于自身计算的
                                    举例：
                                        transform:translateY(-100px);

                可设置变形的原点：transform-origin：20px,20px;
                为元素设置透明效果：opacity：0.7；可设置整个图片的透明；
                rgba(0,0,0,0.7) 只能设置颜色的透明；
                设置3d变形效果：
                    transform-style：preserve-3d；

                居中方式：

                    方式一:box1{
                        position:absolution;
                        top:0;
                        left:0;
                        bottom:0;
                        margin:auto;
                        缺点：只适用于元素的大小确定，如果块元素默认被元素撑开则无法使用
                    }    
                    方式二:box1{
                        left:50%;
                        top:50%;
                        transform:translateX(-50%) translateY(-50%);
                    }
    
                    
            z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
                    距离越大，元素离人越近
            z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
                    必须要设置网页的视距

                设置网页的视距（人眼距离网页的距离）：
                    perspective:800px；设置视距为800px；


            旋转：
                    通过旋转可以是元素沿着x y 或 z 轴旋转指定的角度
                        rotateX()
                        retateY()
                        retateZ()

                    transform:rotateZ(.25turn)圈数
                    transform:rotateZ(100px)距离
                    transform:rotateZ(180deg)角度

    
            缩放：
                    
                    对元素进行缩放的函数：
                        scaleX() 水平方向的缩放 
                        scaleY() 垂直方向缩放
                        scale() 双方向的缩放
                        原理：改变坐标轴的长度！！！

    
    */

    /*
            less 的简介
                less是一门预处理语言
                    -less 是一个css的增强版，通过less可以编写更少的代码实现更强大的样式（css原生也支持变量的设置）
                            -less 中添加了许多的新特性，对变量的支持，对mixin的支持……
                            -less 的语法大致和css语法一致，但是less中添加了许多对css的扩展
                                所以浏览器无法直接执行less的代码，要执行必须先将less转换为css，然后执行


    
                    css变量设置方式
                        html{
                            --color:black;
                        }//设置变量
                        color:var(--color)；  //引用变量
                        计算函数：
                            calc(计算内容);

    
                变量，在变量中可以储存一个任意的值
                并且我们可以在需要时，任意的修改变量中的值
                变量的语法：@变量名
                注意：
                        1.使用变量时，如果是直接使用则以@变量名的形式使用即可
                        2.作为类名或者一部分值时，必须以@{变量名}的形式使用
                        3.变量发生重名时，会优先使用比较近的变量
                        4.可以在变量声明前就使用变量
    
    
            父元素和扩展
                &就表示外层的父元素

                extend（） 对当前选择器扩展指定选择器的样式（选择器分组）
                例如：
                .p1{
                    width:100px;
                    height:100px;
                }
                .p2:extend(.p1){
                    color:red;
                }

                .p3{
                    直接对指定的样式进行引用，相当于对p1的样式进行复制
                    mixin 混合
                    .p1();
                }

                .p4(){
                    创建一个mixins
                    可被其他元素引用
                    width:100px;
                    height:100px;
                }


            混合函数：
                在混合函数中可以直接设置变量

                例如：
                    .test(@w,@h,@bg-color){
                        width:@w;
                        height:@h;
                        border:1px solid @bg-color;
                    }创建函数
                    div{
                        .test(200px,300px,#fba);

                    }调用函数，按顺序传递函数
                    background-color:darken(#bfa,20%)//将元素加深20%

                在less中所有的数值都可以直接进行运算
    */



    /*
    
            flex(弹性盒，伸缩盒)
                -在css中的又一种布局手段，他主要用来代替浮动来完成页面的布局
                -flex可以是元素具有弹性，让元素可以跟随页面的大小的改变来改变
                -弹性容器
                    -要使用弹性盒，必须先将一个元素设置为弹性容器
                    -我们通过 display来设置弹性容器
                        display:flex 设置为块级弹性容器
                        display:inline-flex; 设置为行内的弹性容器

                -弹性元素
                    -弹性容器的子元素是弹性元素（弹性项）

                flex-direction 指定容器中弹性元素的排列方式
                    可选值：
                        row 默认值，弹性元素在容器中水平排列（左向右）
                            -主轴 自左向右

                        row-reverse 弹性元素在容器中反向水平排列（右向左）
                            -主轴 自右向左
                        column 弹性元素纵向排列（自上向下）
                        column-reverse 弹性元素纵向排列（自上向下）

                        主轴：
                            弹性元素的排列方向称为主轴
                        侧轴：
                            与主轴方向垂直

                flex-grow 指定弹性元素的伸展系数
                    -当父元素有多余空间时，子元素如何伸展
                    -父元素的剩余空间，会按照比例进行分配
                    flex-shrink 指定弹性元素的收缩系数
                        -当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩

                flex-wrap 设置弹性元素是否在弹性容器中自动换行
                    可选值：
                        nowrap 默认值 元素不会自动换行
                        wrap 元素沿着辅轴方向自动换行
                        wrap-reverse 元素沿着辅轴反方向换行

                        flex-flow:warp  和 direction 的简写属性
                        flex-flow：row wrap;

                justify-content
                    -如何分配主轴上的空白空间（主轴上的元素如何排列）
                    -可选值：
                        flex-start 元素沿着主轴起边排列
                        flex-end 元素沿着诸侯终边排列
                        center 元素居中排列
                        space-around 空白分布到元素两侧
                        space-evenly 空白分布到元素单侧
                        space-between 空白分布到元素之间

                align-items:
                    元素在辅轴上如何对齐
                    - 元素间的关系
                        -可选值
                            stretch 默认值 将元素的长度设置为相同的值
                            flex-start 元素不会拉伸，沿着辅轴起边对齐
                            flex-end    沿着辅轴的终边对齐
                            center 居中对齐

                align-content:辅轴空白上的分布

            弹性元素的缩减系数
                    -缩减系数的计算方式比较复杂
                    -缩减多少是根据 缩减系数和元素大小来计算

            元素基础长度

            flex-basis 指定的是元素在主轴上的基础长度
                    如果主轴是横向的，则该值指定的就是元素的宽度
                    如果主轴是纵向的，则该值指定的就是元素的高度
                        -默认值是auto 表示参考元素自身的高度或宽度
                        -如果传递了一个具体的数值，则以该值为准

            flex 可以设置弹性元素所有的三个样式
                    flex 增长 缩减 基础
                        initial "flex:0 1 auto"
                        auto  "flex 1 1 auto"
                        none "flex:0 0 auto" 弹性元素没有弹性

                    可通过order决定弹性元素的排列顺序
                    例如：
                        li:nth-child(1){
                            order:1;
                        }

    
    */

    
    /*
    
            像素：
                -屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
                -分辨率：1920x1080 说的就是屏幕中小点的数量
                -在前端开发中像素要分成两种情况讨论；css像素 和 物理像素
                -物理像素，上诉所说的小点就是物理像素
                -css像素 编写网页时，需要将css像素转换为物理像素然后再呈现
                -一个css像素最终由几个物理像素显示，由浏览器决定
                        默认情况下载PC端：一个物理像素=一个css像素

            视口(vw)：
                -视口就是屏幕中用来显示网页的区域
                -可以通过查看视口的大小来计算物理像素和css像素的比值
                -默认情况下
                        视口宽度 1920px（css像素）
                                1930px（物理像素）
                                -此时，css像素和物理像素的比值时1:1

                放大两倍的情况：
                        视口宽度 960px（css像素）
                                1920px（物理像素）
                                -此时，css像素和物理像素的比值是1:1

            在不同的屏幕，单位姓苏的大小是不同的，像素越小屏幕会越清晰
                        24寸 1920x1080
                        4.7寸 750x1334

                        智能手机的像素点 远远小于 计算机的像素点

                        默认情况下，移动端的网页都会将视口设置为980px（css像素）
                            以确保pc端的网页可以在移动端正常显示，但是如果网页的宽度超过了980px
                                移动端的浏览器会自动对网页缩放以完整显示网页

                        https://material.io/resources/devices/

                        所以基本大部分的pc端的网站都可以在移动端中正常浏览，但是往往会有不好得体验
                            为了解决这个问题 ，大部分的网站都会专门为移动端设计一个网页


            完美视口：
                    移动端的视口大小时980px（css像素）
                        默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）
                        如果我们直接在网页中编写移动代码，这样在980的视口下，像素非常不好
                            导致网页中的内容十分小
                        编写移动页面时，必须要确保有一个比较合理的像素比
                            1css像素 对应 2个物理像素
                            1css像素 对应 3个物理像素

                        -可以通过meta标签 来设置视口大小 

                        -每一款移动设备设计时，都会有一个最佳的像素比
                            一般我们只需要将像素比设置为该值就可以得到一个最佳效果

                            将网页的视口设置为完美视口
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            写移动端就可以把上述代码加上

        
            vw单位
                        不同设备完美视口的大小是不一样的
                            
                        由于不同设备视口和像素比不同，所以同样的像素在不同的设备中是不同的

                        所以在开发时，就不能在使用px来进行布局了

                        vw 表示的是视口的宽度（viewport width）
                            -100vw=一个视口的宽度
                            -1vw=1%个是视口的宽度

                        vw这个单位永远相对于视口宽度进行计算

                        设计图的宽度
                        750px 1125px

                        设计图
                            750px
                        
                        使用vw作为单位

                        创建一个 48px x 35px 的图

                        100vw=750px(设计图的像素) 0.1333333333333vw=1px
                        6.4vw=48px(设计图的像素)
                        4.667vw=35px


            vw 适配
                        网页中的字体大小最小是12px，不能设置比12px还小的字体
                            如果我们设置了一个小于12px的字体，则字体会自动设置为12px

                        0.133333333vw=1px
                        5.333333333vw=40px

                    rem 
                            -1rem=1html的字体大小
                            -1rem=40px(设计图)
    
    
    
    */


    /*
            响应式布局
                -网页可以根据不同的设备或窗口大小呈现出不同的效果
                -使用响应式布局，可以是一个网页适用于所有设备
                -响应式布局的关键就是 媒体查询
                -通过媒体查询，可以为不同的设备，或者设备不同的状态来分别设置样式
    
            使用媒体查询：
                语法： @media 查询规则{}
                        媒体类型
                            all 所有设备
                            print 打印设备
                            screen 带屏幕的设备
                            speech 屏幕阅读器
                            -可以使用，连接多个媒体类型，这样它们之间就是一个或的关系


                        可以在媒体类型前添加一个only，表示只有
                            only 的使用主要是为了兼容一些老版本的浏览器

                    例如：
                        @media print,screen{
                            body{
                                background-color:#bfa;
                            }
                        }

                        @media only screen{
                            body{
                                background-color:#bfa;
                            }
                        }
                        


            媒体特性：
                        width 视口的宽度
                        height 视口的高度

                        min-width 视口的最小宽度（视口大于指定宽度时生效）
                        max-width 视口的最大宽度（视口小于指定宽度时生效）
                    
                    例如：
                        @media(max-width:500px){
                            body{
                                background-color:@bfa;
                            }
                        }

                    样式切换的分界点，我们称为断点，也就是网页的样式会在这个点时发生变化
                    一般比较常用的断点

                    小于768 超小屏幕 max-width=768px
                    大于768 小屏幕 min-width=768px
                    大于992 中型屏幕 min-width=992px
                    大于1200 大屏幕 min-width=1200px
    
    
    */


    </style>

</head>

<body>


    
</body>

</html>